<template>
	<el-dialog :model-value="visible" width="40%" :z-index="9" top="3vh" @close="cancel">
		<template #header>
			<div class="custom-header">查看</div>
		</template>

		<div class="boardBox">
			<el-tabs v-model="activeTab" style="">
				<el-tab-pane label="基础信息" name="1">
					<table class="descriptions">
						<tr>
							<td class="label">项目名称</td>
							<td class="value">{{ queryParams.researchName }}</td>
						</tr>
						<tr>
							<td class="label">联系人</td>
							<td class="value">{{ queryParams.contacts }}</td>
						</tr>
						<tr>
							<td class="label">联系电话</td>
							<td class="value">{{ queryParams.contactsTel }}</td>
						</tr>
						<tr>
							<td class="label">联系人邮箱</td>
							<td class="value">{{ queryParams.contactsEmail }}</td>
						</tr>
						<tr>
							<td class="label">负责人</td>
							<td class="value">{{ queryParams.principal }}</td>
						</tr>
						<tr>
							<td class="label">负责人电话</td>
							<td class="value">{{ queryParams.principalTel }}</td>
						</tr>
						<tr>
							<td class="label">负责人邮箱</td>
							<td class="value">{{ queryParams.principalTel }}</td>
						</tr>
						<tr>
							<td class="label">承办单位</td>
							<td class="value">{{ queryParams.responsibleEnt }}</td>
						</tr>
						<tr>
							<td class="label">课题总经费(万元)</td>
							<td class="value">{{ queryParams.projectFunding }}</td>
						</tr>
						<tr>
							<td class="label">申请经费(万元)</td>
							<td class="value">{{ queryParams.applyFunding }}</td>
						</tr>
						<tr>
							<td class="label">自筹经费(万元)</td>
							<td class="value">{{ queryParams.selfFunding }}</td>
						</tr>
						<tr>
							<td class="label">主要研究内容</td>
							<td class="value">{{ queryParams.researchContents }}</td>
						</tr>
						<tr>
							<td class="label">技术难点</td>
							<td class="value">{{ queryParams.techDifficulty }}</td>
						</tr>
						<tr>
							<td class="label">考核指标</td>
							<td class="value">{{ queryParams.kpi }}</td>
						</tr>
					</table>
				</el-tab-pane>

				<el-tab-pane label="意见及文件查看" name="2">
					<div class="mt10 mb10" style="font-size: 16px; font-weight: bold">预审</div>
					<table class="descriptions">
						<tr>
							<td class="label">结论及意见</td>
							<td class="value">{{ queryParams.auditResultPre ? (queryParams.auditResultPre === '4' ? '拟立项' : '拟不立项') : '未评审' }}</td>
						</tr>
						<tr>
							<td class="label">评审意见附件(pdf)</td>
							<td class="value cursor" @click="handleDownload(queryParams.commentsRecordList)">
								{{
									queryParams.commentsRecordList.length > 0
										? queryParams.commentsRecordList[0].fileRealName + '.' + queryParams.commentsRecordList[0].fileExtName
										: ''
								}}
							</td>
						</tr>
					</table>
					<div class="mt10 mb10" style="font-size: 16px; font-weight: bold">立项评审</div>
					<table class="descriptions">
						<tr>
							<td class="label">结论及意见</td>
							<td class="value">{{ queryParams.auditResultRev ? (queryParams.auditResultRev === '6' ? '立项' : '不立项') : '未评审' }}</td>
						</tr>
						<tr>
							<td class="label">评审意见附件(pdf)</td>
							<td class="value cursor" @click="handleDownload(queryParams.projectReviewRecordList)">
								{{
									queryParams.projectReviewRecordList.length > 0
										? queryParams.projectReviewRecordList[0].fileRealName + '.' + queryParams.projectReviewRecordList[0].fileExtName
										: ''
								}}
							</td>
						</tr>
						<tr>
							<td class="label">立项批文(pdf)</td>
							<td class="value cursor" @click="handleDownload(queryParams.documentRecordList)">
								{{
									queryParams.documentRecordList.length > 0
										? queryParams.documentRecordList[0].fileRealName + '.' + queryParams.documentRecordList[0].fileExtName
										: ''
								}}
							</td>
						</tr>
					</table>
					<dt class="mt10 mb10" style="font-size: 16px; font-weight: bold">
						最终结论:{{ queryParams.approvalReview ? (queryParams.approvalReview === '6' ? '立项' : '不立项') : '未评审' }}
					</dt>
				</el-tab-pane>
			</el-tabs>
		</div>
	</el-dialog>
</template>
<script setup lang="ts">
import { reactive, ref, watch } from 'vue'

import { detailApi } from '@/api/Prospect-project/project-declare'
import { useDictionaryStore } from '@/store/modules/dictionary'
import { useUserStore } from '@/store/modules/user'
const dictionaryStore = useDictionaryStore()
const userStore = useUserStore()
const activeTab = ref('1')
const props = defineProps({
	visible: {
		type: Boolean,
		default: false
	},
	isedit: {
		type: Boolean,
		default: false
	},
	sid: {
		type: String,
		default: ''
	}
})
const editorValue = ref('<p>maku</p>')
const deptoptions = ref([])
const job_modeoptions = ref([])
const filelist = reactive([])

const queryParams = ref({
	id: '',
	researchName: '',
	principal: '',
	principalTel: '',
	principalEmail: '',
	contacts: '',
	contactsTel: '',
	contactsEmail: '',
	responsibleEnt: '',
	projectFunding: null,
	applyFunding: null,
	selfFunding: null,
	researchContents: '',
	techDifficulty: '',
	kpi: '',
	projectManagerA: '',
	projectManagerB: '',
	projectNumber: '',
	applyYear: '',
	processStage: '',
	processStatus: '',
	filingAbstract: '',
	filingKeywords: '',
	isPaper: 1,
	paperRemark: '',
	isBook: 1,
	bookRemark: '',
	isPatent: 1,
	patentRemark: '',
	isTrademark: 1,
	trademarkRemark: '',
	filingName: '',
	filingNumber: '',
	mainCompletionUnits1: '',
	mainCompletionUnits2: '',
	mainCompletionUnits3: '',
	mainCompletionPersion1: '',
	mainCompletionPersion2: '',
	mainCompletionPersion3: '',
	mainCompletionPersion4: '',
	mainCompletionPersion5: '',
	remark: '',
	actualOpeningDate: '',
	actualMidtermDate: '',
	actualCompletionDate: '',
	publishStatus: null,
	publishDate: null,
	approvalReview: null,
	wordRecordList: [],
	pdfRecordList: [],
	documentRecordList: [],
	approvalReview: null,
	auditResultPre: null,
	auditResultRev: null,
	commentsRecordList: [], //预审评审意见附件
	projectReviewRecordList: [] //评审意见附件
})

const getProgressStateName = (row: any) => {
	switch (row) {
		case '0':
			return '申报中'
		case '1':
			return '预审'
		case '2':
			return '立项评审(最终结论) '
		case '3':
			return '开题'
		case '4':
			return '中期'
		case '5':
			return '结题'
		case '6':
			return '等待归档'
		case '7':
			return '归档'
	}
}
const emit = defineEmits<{ (event: 'update:visible', value: boolean): void; (event: 'success', value: ''): void }>()
// 获取表单引用
const queryForm = ref(null)
const uploadRef = ref(null)

const detailid = ref('')
// 监听 localValue 的变化，通知父组件更新值
watch(
	() => props.visible,
	newValue => {
		if (newValue) {
			detailid.value = ''
			const data = {
				id: '',
				researchName: '',
				principal: '',
				principalTel: '',
				principalEmail: '',
				contacts: '',
				contactsTel: '',
				contactsEmail: '',
				responsibleEnt: '',
				projectFunding: null,
				applyFunding: null,
				selfFunding: null,
				researchContents: '',
				techDifficulty: '',
				kpi: '',
				projectManagerA: '',
				projectManagerB: '',
				projectNumber: '',
				applyYear: '',
				processStage: '',
				processStatus: '',
				filingAbstract: '',
				filingKeywords: '',
				isPaper: 1,
				paperRemark: '',
				isBook: 1,
				bookRemark: '',
				isPatent: 1,
				patentRemark: '',
				isTrademark: 1,
				trademarkRemark: '',
				filingName: '',
				filingNumber: '',
				mainCompletionUnits1: '',
				mainCompletionUnits2: '',
				mainCompletionUnits3: '',
				mainCompletionPersion1: '',
				mainCompletionPersion2: '',
				mainCompletionPersion3: '',
				mainCompletionPersion4: '',
				mainCompletionPersion5: '',
				remark: '',
				actualOpeningDate: '',
				actualMidtermDate: '',
				actualCompletionDate: '',
				publishStatus: null,
				publishDate: null,
				approvalReview: null,
				wordRecordList: [],
				pdfRecordList: [],
				documentRecordList: [],
				approvalReview: null,
				auditResultPre: null,
				auditResultRev: null,
				commentsRecordList: [], //预审评审意见附件
				projectReviewRecordList: [] //评审意见附件
			}
			queryParams.value = data

			if (props.sid) {
				detailid.value = props.sid
				getDetail(props.sid)
			}
		}
	}
)

const info = ref({ url: '', qrcode: '' })
const addvisible = ref(false)

// 下载文件逻辑
const handleDownload = async (file: any) => {
	// 替换为你的下载逻辑
	console.log('下载功能待实现', file)
	const url = window.location.protocol + '//' + window.location.host + '/JGBStandardWebApi' + `/api/files/${file[0].id}/downloadByFileId`
	await downloadFile(url, file[0])
}

async function downloadFile(url, row: any) {
	try {
		// 发起请求
		const response = await fetch(url, {
			method: 'GET',
			headers: {
				Authorization: userStore.token, // 在 Header 中传递 token
				'Content-Type': 'application/json' // 根据实际需求设置 Content-Type
			}
		})

		if (!response.ok) {
			throw new Error(`下载失败: ${response.statusText}`)
		}

		// 获取文件数据
		const blob = await response.blob()

		// 创建下载链接
		const downloadLink = document.createElement('a')
		downloadLink.href = URL.createObjectURL(blob)
		downloadLink.download = row.fileRealName ? row.fileRealName : row.name // 设置下载文件名(根据实际需求修改)
		document.body.appendChild(downloadLink)
		downloadLink.click()
		document.body.removeChild(downloadLink)
	} catch (error) {
		console.error('下载过程中出错:', error)
	}
}
// const selectedArrRef = ref(null)
// function handleChange(value) {
// 	selectedArrRef.value.togglePopperVisible()
// }
const getDetail = (id: String) => {
	detailApi({ id: id }).then(res => {
		queryParams.value = res.data
		uploadPdfList.value = res.data.pdfRecordList.map((item: any) => {
			return {
				...item,
				name: item.fileRealName
			}
		})

		uploadShowPdfList.value = res.data.wordRecordList.map((item: any) => {
			return {
				...item,
				name: item.fileRealName
			}
		})
	})
}

function cancel() {
	emit('update:visible', false)
}
</script>

<style lang="scss" scoped>
.boardBox {
	display: flex;
	// align-items: center;
	flex-direction: column;
	// flex-wrap: wrap;
	// justify-content: space-around;
	overflow-y: auto;
	height: calc(100vh - 220px);

	&::-webkit-scrollbar {
		display: none;
	}

	-ms-overflow-style: none;
	scrollbar-width: none;

	.tishi {
		font-size: 14px;
		color: #999;
		background-color: #f3f8fb;
		padding: 5px 10px;
		border-radius: 6px;
	}
}

.descriptions {
	display: flex;
	flex-wrap: wrap;
	border-right: solid 1px #eee;
	border-bottom: solid 1px #eee;
	margin-bottom: 20px;

	tr {
		width: 100%;

		display: flex;
		// margin-bottom: 10px;
	}

	.label {
		background-color: #f5f7fa;
		width: 150px;
		padding: 10px 10px;
		border-top: solid 1px #eee;
		border-left: solid 1px #eee;
		display: flex;
		align-items: center;
	}

	.value {
		border-top: solid 1px #eee;
		border-left: solid 1px #eee;
		padding: 10px;
		flex: 1;
		display: flex;
		align-items: center;
	}
}
</style>
